<template>
    <div id="VrHotspot" class="flex-center">
        <div class="iframe_warpper">
            <iframe ref="iframe" :src="vlSrc" frameborder="0" class="v-l-container" width="100%" height="100%" allowtransparency="true" allowfullscreen="true"  webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
        </div>
    </div>
</template>

<script>
import mixin from '../../mixin/mixin'
import { Ini } from '../../../content/utils/ini';
export default {
    name: 'VrHotspot',
    mixins: [mixin],
    data() {
        return {
            vlSrc: '',
        }
    },
    mounted() {
        console.log('VrHotspot');
        let eduLevel = Ini.readIni('data', 'eduLevel')
        this.vlSrc = `http://127.0.0.1:${eduLevel === 'primary' ? '38001' : '38002'}/${this.bsr.meta_info.meta_type}/${this.bsr.meta_info.meta_id}/build/index.html`
        this.$nextTick(() => {
            let dom = this.$refs.iframe.contentWindow.document.documentElement
            dom.style.width  = '100%'
            dom.style.height = '100vh'
            dom.style.background = "#fff"
            dom.style.display    = 'flex'
            dom.style.alignItems = 'center'
            // let searchVideo = setInterval(()=>{
            //     let video = document.querySelector("video");
            //     console.log('video',video);
            //     if (video) {
            //         clearInterval(searchVideo)
            //     }
            // },2000)
            document.getElementsByTagName
        })
        document.addEventListener('webkitfullscreenchange', function fullscreenChange() {
            if (document.fullscreenEnabled ||
                document.webkitIsFullScreen ||
                document.mozFullScreen ||
                document.msFullscreenElement) {
                console.log('enter fullscreen');
            } else {
                console.log('exit fullscreen');
            }
        }, false);
    },
    methods: {
        exitFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
    },
}
</script>

<style lang="scss">
#VrHotspot {
    width: 100vw;
    height: calc(100vh - 30px);
    .iframe_warpper{
        width: 100vw;
        height: calc(100vh - 60px);
    }
}
</style>